<template>
  <div class="from">
    <div class="title">
      {{$t('ConImage_ContainerName')}}
<!--      {{$t('从容器建立镜像')}}-->
    </div>
    <button @click="changeAddShow(0)" class="btn btn1" :class="addShow === 0 ? 'btnActive' : ''">{{$t('ConImage_simple')}}</button>
    <button @click="changeAddShow(1)" class="btn btn2" :class="addShow === 1 ? 'btnActive' : ''">{{$t('ConImage_senior')}}</button>
    <div class="addbox" v-show="addShow === 0">
      <SimpleAdd :item="item"></SimpleAdd>
    </div>
    <div class="addbox" v-show="addShow === 1">
      <SeniorAdd :item="item"></SeniorAdd>
    </div>
  </div>
</template>

<script>
import SimpleAdd from '@/components/Image/SimpleAdd'
import SeniorAdd from '@/components/Image/SeniorAdd'
export default {
  data () {
    return {
      addShow: 0
    }
  },
  props: ['item'],
  methods: {
    // 显示高级添加还是简单添加
    changeAddShow (id) {
      this.addShow = id
    }
  },
  components: {
    SeniorAdd,
    SimpleAdd
  }
}
</script>

<style lang="scss" scoped>
.from{
  border: 1px solid #067FB5;
  border-radius: 15px;
  padding: 20px 10px 0px 10px;
  margin: 30px 0px;
  background: #F7FCFF;
  position: relative;
  .title{
    position: absolute;
    top: -14px;
    z-index: 10;
    left: 30px;
    font-size: 18px;
    font-weight: bold;
    background: #F7FCFF;
    padding: 0px 5px;
    border-radius: 5px;
  }
}
.btn{
  padding: 6px 15px;
  background: #067FB5;
  font-size: 12px;
  color: #fff;
  margin-bottom: 20px;
}
.btnActive{
  background: #286090;
}
.btn1{
  border-radius: 5px 0px 0px 5px;
}
.btn2{
  border-radius: 0px 5px 5px 0px;
}
</style>
